<template>
    <div class="rank_header">
        <div class="title">
            <span>礼盒装唇釉热销榜</span>
        </div>
    </div>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="OnLoad"
        >
            <div class="rank_box">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="top">
                        <div class="img">
                            <img :src="item.products.thumb_text" />
                        </div>
                        <div class="content">
                            <div class="title">{{ item.products.name }}</div>
                            <p class="middle" v-if="item.comment">
                                <span>值得买</span>
                                {{ item.comment }}
                            </p>

                            <p class="middle" v-else>
                                暂无评价
                            </p>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="price">
                            ￥<span>{{ item.products.price }}</span>
                            <span>极速退款</span>
                        </div>
                        <div class="btn" @click="ToProductInfo(item.proid)">去购买></div>
                    </div>
                    <div class="tip">
                        <img src="/assets/images/hot.png" />
                        <span>No.{{ index += 1 }}</span>
                    </div>
                </div>
            </div>

            <!-- 返回顶部 -->
            <van-back-top />
        </van-list>
    </van-pull-refresh>

    <Tabbar />
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    // 定义相应变量
    const list = ref([]); // 数据列表
    const page = ref(1);  // 分页
    const loading = ref(false); // 加载状态
    const finished = ref(false); // 是否无更多数据
    const refreshing = ref(false); // 下拉刷新

    // 下拉刷新函数
    const OnRefresh = () =>
    {
        // 清空查询参数
        page.value = 1;
        list.value = [];
        finished.value = false;
        loading.value = true;
        refreshing.value = true;

        // 可以去掉定时器
        setTimeout(OnLoad,1500);
    }

    // 上拉加载函数
    const OnLoad = async () =>
    {
        // 判断是否为加载中的状态
        if(refreshing.value)
        {
            refreshing.value = false;
        }

        // 组装参数
        let params = {
            page:page.value
        }

        let result = await proxy.$POST({
            url:'/index/rank',
            params
        });

        // 请求发送完毕后，加载状态也就完毕了
        loading.value = false;

        if(result.code === 1)
        {
            let count = result.data ? result.data.count : 0;
            list.value = result.data ? list.value.concat(result.data.list) : [];

            if(list.value.length >= count)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;
        }else
        {
            // 如果没有更多数据了 就说明已经加载到底了....
            finished.value = true;

            proxy.$fail(result.msg);
        }
    }

    // 跳转商品详情
    const ToProductInfo = (proid) => proxy.$router.push({path:'/product/info',query:{proid}});
</script>

<style scoped>
    @import url('/assets/css/ProductRank.css');
</style>
